<template>
  <view class="org-info">
    <view class="org-info--logo">
      <TImage :src="info?.logo" width="100rpx" height="100rpx" />
    </view>
    <view class="org-info--text">
      <view class="org-info--name text-overflow-1">{{ info?.orgName }}</view>
      <scroll-view
        class="scroll-view"
        :enhanced="true"
        :show-scrollbar="false"
        scroll-x
        enable-flex
      >
        <view class="industry-list">
          <template v-for="(v, i) in info?.industry" :key="i">
            <text class="industry-item">{{ v }}</text>
          </template>
        </view>
      </scroll-view>
    </view>
  </view>
  <view class="org-intro text-overflow-3">{{ info?.details }}</view>
</template>

<script setup lang="ts">
  import TImage from '@/components/TImage/index.vue';
  import { type MemberCardPriceResult } from '@/api/member/types';
  import { type PropType } from 'vue';

  defineProps({
    info: Object as PropType<MemberCardPriceResult>,
  });
</script>

<style scoped lang="scss">
  $logoWidth: 100rpx;
  $logoMarginR: 30rpx;
  $contentPadding: 30rpx;
  .org-info {
    display: flex;
    align-items: center;
    height: 100rpx;
    &--logo {
      width: $logoWidth;
      flex-shrink: 0;
      margin-right: $logoMarginR;
    }
    &--name {
      color: #333;
      font-size: 28rpx;
    }
    &--text {
      height: inherit;
      flex: 1;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      .scroll-view {
        width: calc(100vw - $contentPadding * 2 - ($logoWidth + $logoMarginR));
      }
    }
    .industry-list {
      display: flex;
      align-items: center;

      .industry-item {
        display: inline-block;
        white-space: nowrap;
        font-size: 28rpx;
        color: #808080;
        padding: 0 16rpx;
        background-color: #f5f5f5;
        border: 1px solid #dddddd;
        border-radius: 100rpx;
        margin-right: 20rpx;
      }
    }
  }
  .org-intro {
    font-size: 24rpx;
    color: #aaabab;
    margin: 30rpx 0;
  }
</style>
